<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="iconfont/iconfont.css" />
		<link rel="stylesheet" href="iconfont/demo.css">
   
		<style>
			*{
				padding:0;
				margin:0;
			}
			body{
				font-size:14px;
			}
			header{
				position:fixed;
				left:0px;
				top:0px;
				width:100%;
				height:35px;
				background:#ccc;
				display:flex;
				line-height:35px;
				
			}
			header div{
				flex:1;
				text-align: center;
			}
			header div:last-of-type{
				text-align: right;
				margin-right:10px;
			}
			footer{
				position:fixed;
				left:0px;
				bottom:0px;
				height:50px;
				background:black;
				width:100%;
			}
			footer div{
				flex:1;
				text-align: center;
				color:white;
			}
			footer ul {
			    display: flex;
			    color: white;
			    list-style-type: none;
			    height: 48px;
			}
			footer ul li {
			    background: black;
			    flex: 1;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    flex-direction: column-reverse;
			}
			footer ul li p{
				color:red;
			}
			 li{
				list-style: none;
			}
			article {
			    margin-top: 35px;
			    margin-bottom: 50px;
			}
			article .larimg{
				width:90%;
			}
			
			
			article li{
				background: repeat-x bottom left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='#ccc' x='0' y='0' width='1' height='0.5'/></svg>");
			    display: flex;
			    flex-direction: row;
			    
			
			}
			article ul li p {
			    padding: 5px;
			    margin: 5px;
			}
			.img {
			    padding: 5px;
			    margin: 5px;
			    width: 40px;
			    height: 40px;
			    background: green;
			    border: 1px solid black;
			}   
		</style>
	</head>
	<body>
		<header>
			<div></div>
			<div>微信</div>
			<div>按钮</div>
		</header>
		<article>
			<div class="larimg">
				<img src="" alt="" />
					
			</div>
			<ul>
				<li>
					<div class="img"><img src="" alt="" /></div>
					<p>123456789</p>
				</li>
				<li>
					<div class="img"><img src="" alt="" /></div>
					<p>123456789</p>
				</li>
				
			</ul>
		</article>
		<footer>
			<ul>
				<li>
					按钮1
					<p class="icon iconfont icon-skill"></p>
					
				</li>
				<li>
					按钮2
					<p class="icon iconfont icon-xiangmu"></p>
					
				</li>
				<li>
					按钮3
					<p class="icon iconfont icon-xiangmu"></p>
					
				</li>
				<li>
					按钮4
					<p class="icon iconfont icon-wo"></p>
					
				</li>
			</ul>
		</footer>
	</body>
</html>


